<script setup>
import {ref, onMounted, computed} from "vue";
import {useRouter} from "vue-router";
import axios from "axios";
import tijianheader from "../components/header.vue";
import {format} from "date-fns";

const order = ref({
    userid: "",
    user: {
        realname: "",
        sex: null,
    },
    smid: null,
    orderdate: "",
    state: 2,
});

const orderlist = ref([]);
const setmeallist = ref([]);
const isLoading = ref(false);
const errorMessage = ref(null);
const router = useRouter();

const pageSize = 8;
const currentPage = ref(1);
const paginatedOrders = computed(() => {
    const start = (currentPage.value - 1) * pageSize;
    const orders = orderlist.value.filter((item) => {
        return item.state === 2 || item.state === 3;
    });
    return orders.slice(start, start + pageSize);
});
const totalPages = computed(() => Math.ceil(orderlist.value.length / pageSize));
const changePage = (direction) => {
    const newPage = currentPage.value + direction;
    if (newPage > 0 && newPage <= totalPages.value) {
        currentPage.value = newPage;
    }
};

const search = async () => {
    try {
        console.log(order.value);
        const response = await axios.post("/api/order/orderAll", order.value);
        orderlist.value = response.data.data || [];
    } catch (error) {
        console.error("搜索失败:", error.response?.data?.message || error.message);
    }
};

const fetchOrderList = async () => {
    try {
        isLoading.value = true; // 启动加载
        errorMessage.value = null; // 清除之前的错误信息
        const response = await axios.post("/api/order/orderAll", {});
        orderlist.value = response.data.data || [];
        console.log(response);
    } catch (error) {
        errorMessage.value = error.response?.data?.message || error.message; // 设置错误信息
        console.error("获取订单列表失败:", errorMessage.value);
    } finally {
        isLoading.value = false; // 加载完成
    }
};

const fetchSetmealList = async () => {
    try {
        isLoading.value = true; // 启动加载
        errorMessage.value = null; // 清除之前的错误信息
        const response = await axios.get("/api/setmeal/All");
        setmeallist.value = response.data.data || [];
    } catch (error) {
        errorMessage.value = error.response?.data?.message || error.message; // 设置错误信息
        console.error("获取套餐列表失败:", errorMessage.value);
    } finally {
        isLoading.value = false; // 加载完成
    }
};

onMounted(fetchOrderList);
onMounted(fetchSetmealList);

const editReport = async (item) => {
    router.push({path: "/appointment", query: {orderid: item.orderid}});
};

const reset = () => {
    order.value = {userid: "", user: {realname: "", sex: 1}, setmeal: {name: ""}, orderdate: "", state: 3};

    fetchOrderList();
};
</script>

<template>
    <div class="medical-exam-system">
        <tijianheader />
        <div class="container">
            <aside class="sidebar">
                <h2 class="sidebar-title">体检客户查询</h2>
                <form class="search-form">
                    <div class="form-group">
                        <label for="phoneNumber">手机号码</label>
                        <input v-model="order.userid" type="text" id="phoneNumber" />
                    </div>
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input v-model="order.user.realname" type="text" id="name" />
                    </div>
                    <div class="form-group">
                        <label>性别</label>
                        <el-radio-group v-model.number="order.user.sex">
                            <el-radio :label="1" size="large">男</el-radio>
                            <el-radio :label="0" size="large">女</el-radio>
                        </el-radio-group>
                    </div>
                    <div class="form-group">
                        <label for="examType">套餐类型</label>
                        <select v-model="order.smid" id="examType">
                            <option value="">请选择</option>
                            <option
                                v-for="item in setmeallist"
                                :key="item.smid"
                                :value="item.smid"
                                v-show="order.user.sex === item.type || order.user.sex == null"
                            >
                                <div>{{ item.name }}</div>
                                <!-- <div v-show="order.user.sex ===item.type">{{ item.name }}</div> -->
                                {{ order.user.sex }}--{{ item.type }}
                            </option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="examDate">体检日期</label>
                        <input v-model="order.orderdate" type="date" id="examDate" />
                    </div>
                    <div class="form-group">
                        <el-radio-group v-model.number="order.state" class="radio-group">
                            <el-radio :label="2" size="large">未归档</el-radio>
                            <el-radio :label="3" size="large">已归档</el-radio>
                        </el-radio-group>
                    </div>
                    <div class="button-group">
                        <el-button type="primary" class="custom-button" @click="search">查询</el-button>
                        <el-button @click="reset" class="btn btn-secondary">重置</el-button>
                    </div>
                </form>
            </aside>
            <main class="main-content">
                <div class="table-container">
                    <div v-if="isLoading">加载中...</div>
                    <!-- 显示加载指示器 -->
                    <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
                    <table class="records-table" v-if="!isLoading && !errorMessage">
                        <thead>
                            <tr>
                                <th>预约编号</th>
                                <th>手机号码</th>
                                <th>真实姓名</th>
                                <th>性别</th>
                                <th>体检套餐类型</th>
                                <th>体检医院</th>
                                <th>体检日期</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in paginatedOrders" :key="item.orderid">
                                <td>{{ item.orderid }}</td>
                                <td>{{ item.userid }}</td>
                                <td>{{ item.user.realname }}</td>
                                <td>{{ item.user.sex === 1 ? "男" : "女" }}</td>
                                <td>{{ item.setmeal.name }}</td>
                                <td>{{ item.hospital.name }}</td>
                                <td>{{ format(new Date(item.orderdate), "yyyy-MM-dd") }}</td>
                                <td v-show="item.state === 2">未归档</td>
                                <td v-show="item.state === 3">已归档</td>
                                <td v-show="item.state === 2">
                                    <p @click="editReport(item)" class="edit-link">编辑体检报告</p>
                                </td>
                                <td v-show="item.state === 3">
                                    <p @click="editReport(item)" class="edit-link">查看体检报告</p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="pagination">
                        <div>{{ pageSize }}条数据/页</div>
                        <button @click="changePage(-1)" :disabled="currentPage === 1">上一页</button>
                        <div class="page-numbers">
                            <button
                                v-for="page in totalPages"
                                :key="page"
                                @click="currentPage = page"
                                :class="{active: currentPage === page}"
                            >
                                {{ page }}
                            </button>
                        </div>
                        <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
                        <button @click="changePage(1)" :disabled="currentPage.value === totalPages.value">
                            下一页
                        </button>

                        <!-- 显示具体页码 -->
                    </div>
                </div>
            </main>
        </div>
    </div>
</template>

<style scoped>
.page-numbers {
    display: flex;
    gap: 0.5rem;
}

.page-numbers button {
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    padding: 0.5rem 1rem;
    background-color: white;
    cursor: pointer;
}

.page-numbers button.active {
    background-color: #3388ff;
    color: white;
}
.error-message {
    color: red;
    margin: 1rem 0;
}

.medical-exam-system {
    min-height: 100vh;
    background-color: #f3f4f6;
}

.header {
    background-color: #b3c0d0;
    color: white;
    padding: 1rem;
}

.title {
    font-size: 1.5rem;
    font-weight: bold;
}

.doctor-name {
    font-size: 0.875rem;
}

.container {
    display: flex;
    margin: 0 auto;
    padding: 1rem;
}

.sidebar {
    width: 300px;
    background-color: white;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    margin-right: 1rem;
}

.sidebar-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.search-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.form-group input[type="text"],
.form-group input[type="date"],
.form-group select {
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
}

.radio-group,
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.button-group {
    display: flex;
    gap: 0.5rem;
}

.btn {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-weight: 500;
    /* cursor: pointer; */
}

.btn-secondary {
    background-color: #8a909c;
    color: white;
}
.custom-button {
    background-color: #3388ff; /* 按钮背景色 */
    color: white; /* 字体颜色 */
    border: none; /* 去除边框 */
    padding: 10px 20px; /* 内边距，控制按钮大小 */
    border-radius: 5px; /* 圆角 */
    cursor: pointer; /* 鼠标悬停效果 */
    font-size: 14px; /* 字体大小 */
    transition: background-color 0.3s; /* 背景颜色渐变效果 */
}

.custom-button:hover {
    background-color: #307cde; /* 鼠标悬停时的背景色 */
}
.main-content {
    flex: 1;
}

.table-container {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.records-table {
    width: 100%;
    border-collapse: collapse;
}

.records-table th,
.records-table td {
    padding: 0.75rem 1rem;
    text-align: left;
}

.records-table th {
    background-color: #f9fafb;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    color: #6b7280;
}

.records-table td {
    border-top: 1px solid #e5e7eb;
}

.edit-link {
    color: #2563eb;
    text-decoration: none;
}

.edit-link:hover {
    text-decoration: underline;
}

.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: white;
    border-top: 1px solid #e5e7eb;
}

.pagination-info {
    font-size: 0.875rem;
    color: #6b7280;
}

.pagination-nav {
    display: flex;
    gap: 0.25rem;
}

.pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    color: #4b5563;
    text-decoration: none;
}

.pagination-link.active {
    background-color: #2563eb;
    color: white;
    border-color: #2563eb;
}

.pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
</style>
